import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { DNavBar, DItemError } from '@/components'
import './moneyrecord.scss'
import http from "@/api";

export default class MoneyRecord extends Component {
  state = {
    pages: 1,
    limit: 10,
    withDrawList: [],
    totalList: [],
    isShowMore: false
  }

  componentDidMount() {
    this.getWithdrawList()
  }

  // 获取列表
  async getWithdrawList() {
    let { pages, limit } = this.state;
    let totalList = await http.getWithdrawList();
    totalList = totalList.filter(item => item.rstCode)

    this.setState({ totalList }, () => {
      this.paging(pages, limit, totalList);
    });
  }
  // 分页
  paging() {
    let { pages, limit, totalList } = this.state;
    let firstIndex, lastIndex, list;

    firstIndex = 0;
    lastIndex = pages * limit;
    list = totalList.slice(firstIndex, lastIndex)
    // 下一页没有数据了
    if (list.length > 5 && list.length === totalList.length) {
      this.setState({
        isShowMore: true
      })
    }
    this.setState({
      withDrawList: list,
    })
  }
  // 触底加载
  onScrollToLower = () => {
    let { isShowMore, pages, totalList, limit } = this.state;
    if (isShowMore || totalList.length < limit) return
    Taro.showLoading()

    this.setState({ pages: pages + 1 }, () => {
      setTimeout(() => {
        Taro.hideLoading()
        this.paging()
      }, 100);
    })
  }
  handleStatus(status) {
    return {
      "$0": "提现成功",
      "$1": "审核中",
      "$2": "提现失败",
    }[`$${status}`];
  }

  render() {
    const { withDrawList, isShowMore } = this.state

    return (
      <View className='b_moneyrecord'>
        <DNavBar title='提现记录'></DNavBar>
        <ScrollView
          className='b_moneyrecord__box'
          scrollY
          onScrollToLower={this.onScrollToLower}
        >
          {
            withDrawList.map(item => <View className="item">
              <View className="title">
                <View className="title_text">
                  <Text className="tx">提现</Text>
                  <Text>{item.trAmt / 100}元</Text>
                </View>
                <View className={["title_tag", (item.rstCode == 1 || item.rstCode == 2) ? "nopass" : "pass"].join(" ")}>{this.handleStatus(item.rstCode)}</View>
              </View>
              <View className="text">提现单号：{item.id}</View>
              <View className="text">申请时间：{item.createTime}</View>
            </View>)
          }
          {
            withDrawList.length === 0 && <DItemError></DItemError>
          }
          {
            withDrawList.length !== 0 && isShowMore && <View className="no-more">暂无更多</View>
          }
        </ScrollView>
      </View>
    )
  }
}
